<template>
    <div id="box">
        <centerHead><div>个人中心</div></centerHead>
        <div id="bo">
            <div class="navBar">
                <p>注销账户</p>
                <div>
                    <div class="head"></div>
                    <div>{{name}}</div>
                </div>
            </div>
            <div class="all">
                <div class="fir">
                    <div>
                        <h2>我的订单</h2>
                        <span>全部订单 ></span>
                    </div>
                    <ul>
                        <li>
                            <van-icon name="pending-payment" size="32px" @click="myOrder()" color="red"/>
                            <p>待付款</p>
                        </li>
                        <li>
                            <van-icon name="send-gift-o" size="32px" @click="myOrder()" color="red"/>
                            <p>待发货</p>
                        </li>
                        <li>
                            <van-icon name="logistics" size="32px" @click="myOrder()" color="red"/>
                            <p>待收货</p>
                        </li>
                        <li>
                            <van-icon name="comment-o" size="32px" @click="myOrder()" color="red"/>
                            <p>待评价</p>
                        </li>
                        <li>
                            <van-icon name="service-o" size="32px" @click="myOrder()" color="red"/>
                            <p>退款/售后</p>
                        </li>
                    </ul>
                </div>
                <div class="sec">
                    <ul>
                        <li><van-icon name="bill-o" size="22px" color="red"/><span>我的优惠券</span><div><van-icon name="arrow" size="15px"/></div></li>
                        <li><van-icon name="vip-card-o" size="22px" color="red"/><span>S码通道</span><div><van-icon name="arrow" size="15px"/></div></li>
                        <li><van-icon name="calendar-o" size="22px" color="red"/><span>我的预售</span><div><van-icon name="arrow" size="15px"/></div></li>
                        <li><van-icon name="gift-o" size="22px" color="red"/><span>我的礼物</span><div><van-icon name="arrow" size="15px"/></div></li>
                        <li><van-icon name="location-o" size="22px" color="red"/><span>地址管理</span><div><van-icon name="arrow" size="15px"/></div></li>
                        <li><van-icon name="records" size="22px" color="red"/><span>意见反馈</span><div><van-icon name="arrow" size="15px"/></div></li>
                        <li><van-icon name="shop-o" size="22px" color="red"/><span>关于商城</span><div><van-icon name="arrow" size="15px"/></div></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// import BetterScroll from 'better-scroll'
import Vue from 'vue'
import { Icon } from 'vant'
// import http from '@/util/http'
import centerHead from '@/views/header/head'
Vue.use(Icon)
export default {
  components: {
    centerHead
  },
  data () {
    return {
      name: ''
    }
  },
  mounted () {
    this.name = localStorage.getItem('username')
    // new BetterScroll("#bo",{
    //     scrollbar : {
    //         fade : true,
    //     },
    //     click : true
    // })
  }
}
</script>
<style lang="scss" scoped>
    #box{
        display:flex;
        flex-direction: column;
        height:100%;

        #bo{
            margin-top:50px;
            background-color: #eee;
            height:680px;
            position:relative;
            .navBar{
                background-color: #000;
                height:190px;
                p{
                    text-align:right;
                    height:50px;
                    line-height:50px;
                    margin-right:20px;
                    font-size:12px;
                    color:#aaa;
                }
                div{
                    margin-left:15px;
                    div{
                        float:left;
                        color:#fff;
                        font-size:15px;
                        height:60px;
                        line-height:60px;
                    }
                    .head{
                        float:left;
                        width: 60px;
                        height: 60px;
                        background-color: rgb(255,255,255,0.8);
                        border-radius: 50%;
                        margin-right:10px;
                    }
              }
            }
        .all{
            position: absolute;
            width: 340px;
            left:50%;
            margin-left:-170px;
            top:150px;
            z-index: 5;
            .fir,.sec{
                background-color: #fff;
            }
            .fir{
                height:140px;
                margin-bottom: 20px;
                div{
                    height:35px;
                    line-height:35px;
                    h2{
                        float:left;
                        margin-left:10px;
                        font-size:15px;
                        width: 100px;
                    }
                    span{
                        float:right;
                        margin-right:10px;
                        font-size:12px;
                    }
                }
                ul{
                    margin-top:10px;
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    li{
                        margin:0 10px;
                        height:60px;
                        line-height: 30px;
                        text-align:center;
                        p{
                            font-size:14px;
                        }
                    }
                }
            }
            .sec{
                ul{
                    width: 340px;
                li{
                    position:relative;
                    border-bottom:1px solid #eee;
                    height:48px;
                    width: 330px;
                    line-height:48px;
                    margin:0 5px;
                    span{
                        font-size:14px;
                        margin-left:5px;
                    }
                    div{
                        float:right;
                        margin-right:5px;
                    }
                }
                }
            }
        }
        }
    }
</style>
